import React, { useState } from "react";

import { UploadOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import * as Icon from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom";
import { Layout, Menu } from "antd";
import menuList from "../../config";
import { useDispatch } from "react-redux";
import { selectTagList } from "../../store/reducers/tab";
const { Sider } = Layout;

// console.log("menuList", menuList);
const Aside = (props) => {
  // console.log("Aside", props);
  const { collapsed, Collapsed } = props;
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();
  console.log("location", location);
  // 将菜单数据添加到store中
  const setTagList = (val) => {
    dispatch(selectTagList(val));
  };
  const clickMenu = (e) => {
    console.log("e", e);
    let data;
    menuList.forEach((item) => {
      // console.log("item", item);
      if (item.path == e.keyPath[e.keyPath.length - 1]) {
        data = item;
        // 如果是有二级菜单的
        if (e.keyPath.length > 1) {
          data = item.children.find((child) => {
            return child.path == e.key;
          });
        }
      }
    });

    setTagList({
      path: data.path,
      name: data.name,
      label: data.label,
    });
    navigate(e.key);
  };
  // 动态获取icon
  const iconToElement = (name) => React.createElement(Icon[name]);
  // 菜单数据的处理
  const getItems = (items, list = []) => {
    items.map((item) => {
      list.push({
        key: item.path,
        ...(item.icon ? { icon: iconToElement(item.icon) } : []),
        label: item.label,
        ...(item.children ? { children: getItems(item.children) } : []),
      });
    });
    return list;
  };
  return (
    <Sider trigger={null} collapsible collapsed={Collapsed}>
      <h3 className="app-name">{Collapsed ? "后台" : "爱车易后台管理平台"}</h3>
      <Menu theme="dark" mode="inline" selectedKeys={[location.pathname]} items={getItems(menuList)} style={{ height: "100%" }} onClick={clickMenu}></Menu>
    </Sider>
  );
};

export default Aside;
